راهنمای Async Iterator در جاوااسکریپت: تسلط بر ترکیب جریان‌های ناهمزمان با Zip

برنامه‌نویسی ناهمزمان یکی از ارکان اصلی توسعه جاوااسکریپت مدرن است که به ما امکان می‌دهد عملیاتی را که رشته اصلی را مسدود نمی‌کنند، مدیریت کنیم. با معرفی پیمایشگرها و مولدهای ناهمزمان (Async Iterators and Generators)، کار با جریان‌های داده ناهمزمان مدیریت‌پذیرتر و زیباتر شده است. اکنون، با ظهور ابزارهای کمکی Async Iterator، ابزارهای قدرتمندتری برای دستکاری این جریان‌ها به دست می‌آوریم. یکی از این ابزارهای کمکی بسیار مفید، تابع zip است که به ما امکان می‌دهد چندین جریان ناهمزمان را در یک جریان واحد از چندتایی‌ها (tuples) ترکیب کنیم. این پست وبلاگ به طور عمیق به بررسی ابزار کمکی zip، عملکرد، موارد استفاده و مثال‌های عملی آن می‌پردازد.

درک پیمایشگرها و مولدهای ناهمزمان

قبل از پرداختن به ابزار کمکی zip، بیایید به طور خلاصه پیمایشگرها و مولدهای ناهمزمان را مرور کنیم:

• پیمایشگرهای ناهمزمان (Async Iterators): شیئی که از پروتکل پیمایشگر پیروی می‌کند اما به صورت ناهمزمان عمل می‌کند. این شیء دارای یک متد next() است که یک Promise را برمی‌گرداند که به یک شیء نتیجه پیمایشگر ({ value: any, done: boolean }) حل (resolve) می‌شود.
• مولدهای ناهمزمان (Async Generators): توابعی که اشیاء Async Iterator را برمی‌گردانند. آنها از کلمات کلیدی async و yield برای تولید مقادیر به صورت ناهمزمان استفاده می‌کنند.

در اینجا یک مثال ساده از یک مولد ناهمزمان آورده شده است:

async function* generateNumbers(count) {
  for (let i = 0; i < count; i++) {
    await new Promise(resolve => setTimeout(resolve, 100)); // شبیه‌سازی عملیات ناهمزمان
    yield i;
  }
}

این مولد اعداد ۰ تا count - 1 را با تأخیر ۱۰۰ میلی‌ثانیه‌ای بین هر بازدهی (yield) تولید می‌کند.

معرفی ابزار کمکی Async Iterator: Zip

ابزار کمکی zip یک متد استاتیک است که به پروتوتایپ AsyncIterator اضافه شده است (یا بسته به محیط، به عنوان یک تابع سراسری در دسترس است). این تابع چندین پیمایشگر ناهمزمان (یا Async Iterables) را به عنوان آرگومان می‌گیرد و یک پیمایشگر ناهمزمان جدید را برمی‌گرداند. این پیمایشگر جدید آرایه‌هایی (چندتایی‌ها) را بازدهی (yield) می‌کند که در آن هر عنصر در آرایه از پیمایشگر ورودی متناظر خود می‌آید. پیمایش زمانی متوقف می‌شود که هر یک از پیمایشگرهای ورودی به پایان برسد.

در اصل، zip چندین جریان ناهمزمان را به صورت گام به گام (lock-step) با هم ترکیب می‌کند، شبیه به بستن دو زیپ با هم. این ویژگی به ویژه زمانی مفید است که نیاز به پردازش همزمان داده‌ها از چندین منبع دارید.

نحو (Syntax)

AsyncIterator.zip(iterator1, iterator2, ..., iteratorN);

مقدار بازگشتی

یک پیمایشگر ناهمزمان که آرایه‌هایی از مقادیر را بازدهی می‌کند، که در آن هر مقدار از پیمایشگر ورودی متناظر گرفته شده است. اگر هر یک از پیمایشگرهای ورودی از قبل بسته شده باشد یا خطایی پرتاب کند، پیمایشگر حاصل نیز بسته شده یا خطا پرتاب خواهد کرد.

موارد استفاده از ابزار کمکی Async Iterator Zip

ابزار کمکی zip طیف وسیعی از موارد استفاده قدرتمند را فراهم می‌کند. در اینجا چند سناریوی رایج آورده شده است:

1. ترکیب داده‌ها از چندین API: تصور کنید نیاز دارید داده‌ها را از دو API مختلف دریافت کرده و نتایج را بر اساس یک کلید مشترک (مثلاً شناسه کاربر) ترکیب کنید. می‌توانید برای جریان داده هر API یک پیمایشگر ناهمزمان ایجاد کرده و سپس از zip برای پردازش همزمان آنها استفاده کنید.
2. پردازش جریان‌های داده آنی: در برنامه‌هایی که با داده‌های آنی سروکار دارند (مانند بازارهای مالی، داده‌های سنسور)، ممکن است چندین جریان به‌روزرسانی داشته باشید. zip می‌تواند به شما در تطبیق این به‌روزرسانی‌ها به صورت آنی کمک کند. به عنوان مثال، ترکیب قیمت‌های خرید و فروش از صرافی‌های مختلف برای محاسبه قیمت میانه.
3. پردازش موازی داده‌ها: اگر چندین وظیفه ناهمزمان دارید که باید روی داده‌های مرتبط انجام شوند، می‌توانید از zip برای هماهنگ کردن اجرا و ترکیب نتایج استفاده کنید.
4. همگام‌سازی به‌روزرسانی‌های رابط کاربری: در توسعه فرانت‌اند، ممکن است چندین عملیات ناهمزمان داشته باشید که باید قبل از به‌روزرسانی رابط کاربری تکمیل شوند. zip می‌تواند به شما در همگام‌سازی این عملیات و اجرای به‌روزرسانی رابط کاربری پس از اتمام همه عملیات کمک کند.

مثال‌های عملی

بیایید ابزار کمکی zip را با چند مثال عملی نشان دهیم.

مثال ۱: ترکیب (Zip) دو مولد ناهمزمان

این مثال نحوه ترکیب دو مولد ناهمزمان ساده را که دنباله‌ای از اعداد و حروف را تولید می‌کنند، نشان می‌دهد:

async function* generateNumbers(count) {
  for (let i = 1; i <= count; i++) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield i;
  }
}

async function* generateLetters(count) {
  const letters = 'abcdefghijklmnopqrstuvwxyz';
  for (let i = 0; i < count; i++) {
    await new Promise(resolve => setTimeout(resolve, 75));
    yield letters[i];
  }
}

async function main() {
  const numbers = generateNumbers(5);
  const letters = generateLetters(5);

  const zipped = AsyncIterator.zip(numbers, letters);

  for await (const [number, letter] of zipped) {
    console.log(`Number: ${number}, Letter: ${letter}`);
  }
}

main();
// خروجی مورد انتظار (ترتیب ممکن است به دلیل ماهیت ناهمزمان کمی متفاوت باشد):
// Number: 1, Letter: a
// Number: 2, Letter: b
// Number: 3, Letter: c
// Number: 4, Letter: d
// Number: 5, Letter: e

مثال ۲: ترکیب داده‌ها از دو API شبیه‌سازی شده

این مثال دریافت داده از دو API مختلف و ترکیب نتایج بر اساس شناسه کاربری را شبیه‌سازی می‌کند:

async function* fetchUserData(userIds) {
  for (const userId of userIds) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield { userId, name: `User ${userId}`, country: (userId % 2 === 0 ? 'USA' : 'Canada') };
  }
}

async function* fetchUserPreferences(userIds) {
  for (const userId of userIds) {
    await new Promise(resolve => setTimeout(resolve, 150));
    yield { userId, theme: (userId % 3 === 0 ? 'dark' : 'light'), notifications: true };
  }
}

async function main() {
  const userIds = [1, 2, 3, 4, 5];
  const userData = fetchUserData(userIds);
  const userPreferences = fetchUserPreferences(userIds);

  const zipped = AsyncIterator.zip(userData, userPreferences);

  for await (const [user, preferences] of zipped) {
    if (user.userId === preferences.userId) {
      console.log(`User ID: ${user.userId}, Name: ${user.name}, Country: ${user.country}, Theme: ${preferences.theme}, Notifications: ${preferences.notifications}`);
    } else {
      console.log(`Mismatched user data for ID: ${user.userId}`);
    }
  }
}

main();
// خروجی مورد انتظار:
// User ID: 1, Name: User 1, Country: Canada, Theme: light, Notifications: true
// User ID: 2, Name: User 2, Country: USA, Theme: light, Notifications: true
// User ID: 3, Name: User 3, Country: Canada, Theme: dark, Notifications: true
// User ID: 4, Name: User 4, Country: USA, Theme: light, Notifications: true
// User ID: 5, Name: User 5, Country: Canada, Theme: light, Notifications: true

مثال ۳: کار با ReadableStreams

این مثال نحوه استفاده از ابزار کمکی zip با نمونه‌های ReadableStream را نشان می‌دهد. این موضوع به ویژه هنگام کار با داده‌های جریانی از شبکه یا فایل‌ها مرتبط است.

async function* readableStreamToAsyncGenerator(stream) {
  const reader = stream.getReader();
  try {
    while (true) {
      const { done, value } = await reader.read();
      if (done) return;
      yield value;
    }
  } finally {
    reader.releaseLock();
  }
}

async function main() {
  const stream1 = new ReadableStream({
    start(controller) {
      controller.enqueue('Stream 1 - Part 1\n');
      controller.enqueue('Stream 1 - Part 2\n');
      controller.close();
    }
  });

  const stream2 = new ReadableStream({
    start(controller) {
      controller.enqueue('Stream 2 - Line A\n');
      controller.enqueue('Stream 2 - Line B\n');
      controller.enqueue('Stream 2 - Line C\n');
      controller.close();
    }
  });

  const asyncGen1 = readableStreamToAsyncGenerator(stream1);
  const asyncGen2 = readableStreamToAsyncGenerator(stream2);

  const zipped = AsyncIterator.zip(asyncGen1, asyncGen2);

  for await (const [chunk1, chunk2] of zipped) {
    console.log(`Stream 1: ${chunk1}, Stream 2: ${chunk2}`);
  }
}

main();
// خروجی مورد انتظار (ترتیب ممکن است متفاوت باشد):
// Stream 1: Stream 1 - Part 1\n, Stream 2: Stream 2 - Line A\n
// Stream 1: Stream 1 - Part 2\n, Stream 2: Stream 2 - Line B\n
// Stream 1: undefined, Stream 2: Stream 2 - Line C\n

نکات مهم در مورد ReadableStreams: وقتی یک جریان قبل از دیگری به پایان می‌رسد، ابزار کمکی zip به پیمایش ادامه می‌دهد تا زمانی که همه جریان‌ها تمام شوند. بنابراین، ممکن است برای جریان‌هایی که قبلاً تکمیل شده‌اند با مقادیر undefined مواجه شوید. مدیریت خطا در تابع readableStreamToAsyncGenerator برای جلوگیری از رد شدن‌های (rejections) مدیریت‌نشده و اطمینان از بسته شدن صحیح جریان بسیار مهم است.

مدیریت خطا

هنگام کار با عملیات ناهمزمان، مدیریت خطای قوی ضروری است. در اینجا نحوه مدیریت خطاها هنگام استفاده از ابزار کمکی zip آمده است:

• بلوک‌های Try-Catch: حلقه for await...of را در یک بلوک try-catch قرار دهید تا هرگونه استثنایی که ممکن است توسط پیمایشگرها پرتاب شود را دریافت کنید.
• انتشار خطا: اگر هر یک از پیمایشگرهای ورودی خطایی پرتاب کند، ابزار کمکی zip آن خطا را به پیمایشگر حاصل منتشر می‌کند. اطمینان حاصل کنید که این خطاها را به درستی مدیریت می‌کنید تا از کرش کردن برنامه جلوگیری شود.
• لغو عملیات (Cancellation): پشتیبانی از لغو عملیات را به پیمایشگرهای ناهمزمان خود اضافه کنید. اگر یک پیمایشگر با شکست مواجه شود یا لغو شود، ممکن است بخواهید پیمایشگرهای دیگر را نیز لغو کنید تا از انجام کارهای غیرضروری جلوگیری شود. این امر به ویژه هنگام کار با عملیات طولانی‌مدت اهمیت دارد.

async function main() {
  async function* generateWithError(count) {
    for (let i = 0; i < count; i++) {
      await new Promise(resolve => setTimeout(resolve, 100));
      if (i === 2) {
        throw new Error('خطای شبیه‌سازی شده');
      }
      yield i;
    }
  }

  const numbers1 = generateNumbers(5);
  const numbers2 = generateWithError(5);

  try {
    const zipped = AsyncIterator.zip(numbers1, numbers2);

    for await (const [num1, num2] of zipped) {
      console.log(`Number 1: ${num1}, Number 2: ${num2}`);
    }
  } catch (error) {
    console.error(`Error: ${error.message}`);
  }
}

سازگاری با مرورگر و Node.js

ابزارهای کمکی Async Iterator یک ویژگی نسبتاً جدید در جاوااسکریپت هستند. پشتیبانی مرورگرها از این ابزارها در حال تکامل است. برای اطلاع از آخرین وضعیت سازگاری، به مستندات MDN مراجعه کنید. ممکن است برای پشتیبانی از مرورگرهای قدیمی‌تر نیاز به استفاده از polyfill یا transpiler (مانند Babel) داشته باشید.

در Node.js، ابزارهای کمکی Async Iterator در نسخه‌های اخیر (معمولاً Node.js 18+) در دسترس هستند. اطمینان حاصل کنید که از نسخه سازگار Node.js برای بهره‌مندی از این ویژگی‌ها استفاده می‌کنید. برای استفاده از آن، نیازی به import کردن نیست، زیرا یک شیء سراسری است.

جایگزین‌های AsyncIterator.zip

قبل از اینکه AsyncIterator.zip به راحتی در دسترس قرار گیرد، توسعه‌دهندگان اغلب برای دستیابی به عملکرد مشابه به پیاده‌سازی‌های سفارشی یا کتابخانه‌ها تکیه می‌کردند. در اینجا چند جایگزین آورده شده است:

• پیاده‌سازی سفارشی: شما می‌توانید تابع zip خود را با استفاده از مولدهای ناهمزمان و Promiseها بنویسید. این کار به شما کنترل کاملی بر پیاده‌سازی می‌دهد اما به کد بیشتری نیاز دارد.
• کتابخانه‌هایی مانند `it-utils`: کتابخانه‌هایی مانند `it-utils` (بخشی از اکوسیستم `js-it`) توابع کمکی برای کار با پیمایشگرها، از جمله پیمایشگرهای ناهمزمان، ارائه می‌دهند. این کتابخانه‌ها اغلب طیف وسیع‌تری از ویژگی‌ها را فراتر از ترکیب (zipping) ارائه می‌دهند.

بهترین شیوه‌ها برای استفاده از ابزارهای کمکی Async Iterator

برای استفاده مؤثر از ابزارهای کمکی Async Iterator مانند zip، این بهترین شیوه‌ها را در نظر بگیرید:

• درک عملیات ناهمزمان: اطمینان حاصل کنید که درک کاملی از مفاهیم برنامه‌نویسی ناهمزمان، از جمله Promiseها، Async/Await و پیمایشگرهای ناهمزمان دارید.
• مدیریت صحیح خطاها: برای جلوگیری از کرش‌های غیرمنتظره برنامه، مدیریت خطای قوی را پیاده‌سازی کنید.
• بهینه‌سازی عملکرد: به پیامدهای عملکردی عملیات ناهمزمان توجه داشته باشید. از تکنیک‌هایی مانند پردازش موازی و کش کردن برای بهبود کارایی استفاده کنید.
• در نظر گرفتن لغو عملیات: پشتیبانی از لغو عملیات را برای عملیات طولانی‌مدت پیاده‌سازی کنید تا به کاربران اجازه دهید وظایف را متوقف کنند.
• تست کامل: تست‌های جامعی بنویسید تا اطمینان حاصل کنید که کد ناهمزمان شما در سناریوهای مختلف همانطور که انتظار می‌رود رفتار می‌کند.
• استفاده از نام‌های توصیفی برای متغیرها: نام‌های واضح باعث می‌شوند کد شما راحت‌تر فهمیده و نگهداری شود.
• نوشتن کامنت برای کد: برای توضیح هدف کد و هر منطق غیر واضح، کامنت اضافه کنید.

تکنیک‌های پیشرفته

هنگامی که با اصول اولیه ابزارهای کمکی Async Iterator راحت شدید، می‌توانید تکنیک‌های پیشرفته‌تری را بررسی کنید:

• زنجیره‌سازی ابزارهای کمکی: شما می‌توانید چندین ابزار کمکی Async Iterator را به هم زنجیر کنید تا تبدیلات داده پیچیده‌ای را انجام دهید.
• ابزارهای کمکی سفارشی: شما می‌توانید ابزارهای کمکی Async Iterator سفارشی خود را برای کپسوله کردن منطق قابل استفاده مجدد ایجاد کنید.
• مدیریت فشار معکوس (Backpressure): در برنامه‌های جریانی، مکانیزم‌های فشار معکوس را برای جلوگیری از سرریز شدن مصرف‌کنندگان با داده پیاده‌سازی کنید.

نتیجه‌گیری

ابزار کمکی zip در مجموعه ابزارهای کمکی Async Iterator جاوااسکریپت، روشی قدرتمند و زیبا برای ترکیب چندین جریان ناهمزمان فراهم می‌کند. با درک عملکرد و موارد استفاده آن، می‌توانید کد ناهمزمان خود را به طور قابل توجهی ساده کرده و برنامه‌های کارآمدتر و پاسخ‌گوتری بسازید. به یاد داشته باشید که خطاها را مدیریت کنید، عملکرد را بهینه کنید و لغو عملیات را برای اطمینان از استحکام کد خود در نظر بگیرید. با گسترش استفاده از ابزارهای کمکی Async Iterator، آنها بدون شک نقش مهم‌تری در توسعه جاوااسکریپت مدرن ایفا خواهند کرد.

چه در حال ساخت یک برنامه وب داده-محور، یک سیستم آنی یا یک سرور Node.js باشید، ابزار کمکی zip می‌تواند به شما در مدیریت مؤثرتر جریان‌های داده ناهمزمان کمک کند. با مثال‌های ارائه شده در این پست وبلاگ آزمایش کنید و امکانات ترکیب zip با سایر ابزارهای کمکی Async Iterator را برای آزادسازی پتانسیل کامل برنامه‌نویسی ناهمزمان در جاوااسکریپت کشف کنید. به سازگاری مرورگر و Node.js توجه داشته باشید و در صورت لزوم برای دستیابی به مخاطبان گسترده‌تر از polyfill یا transpiler استفاده کنید.

کدنویسی خوش، و امیدواریم جریان‌های ناهمزمان شما همیشه همگام باشند!